<template>
	<div class="race-index">
		<div class="top-search-wrapper">
			<div style="display: flex;align-items: center;">
				<div style="display: flex;align-items: center;">
					<span style="font-size: 14px;">所属池子：</span>
					<el-select v-model="searchForm.poolId" style="width: 250px;margin-right: 10px;"
						placeholder="请选择所属池子">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
			</div>
			<div>
				<el-button @click="go2Reset" size="mini">重置</el-button>
				<el-button type="primary" @click="go2Search" size="mini">查询</el-button>
			</div>
		</div>
		<el-divider />

		<div style="margin-bottom: 10px;display: flex;align-items: center;justify-content: flex-end;">
			<el-link type="primary" icon="el-icon-circle-plus-outline" :underline="false"
				@click="go2Add">新增出水水质详细</el-link>
			<el-divider direction="vertical"></el-divider>
			<el-link type="primary" icon="el-icon-upload2" :underline="false" @click="go2Import">批量导入</el-link>
			<el-divider direction="vertical"></el-divider>
			<el-link type="primary" icon="el-icon-download" :underline="false" @click="go2ExportExcel">批量导出</el-link>
			<el-divider direction="vertical"></el-divider>
			<el-link type="danger" icon="el-icon-delete" :underline="false" @click="go2BatchDel">批量删除</el-link>
			<el-divider direction="vertical"></el-divider>
			<i style="color: #1890ff;cursor: pointer;" class="el-icon-refresh" @click="go2Refresh"></i>
		</div>

		<div class="table-content-wrapper">
			<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="50">
				</el-table-column>
				<el-table-column prop="indicator" label="指标名称" align="center" header-align="center" />
				<el-table-column prop="waterPoolName" label="所属池子" align="center" header-align="center" />
				<el-table-column prop="policyTypeName" label="策略类型" align="center" header-align="center" />
				<el-table-column prop="standardValue" label="标准值" align="center" header-align="center" />
				<el-table-column prop="predictedValue" label="预测值" align="center" header-align="center" />
				<el-table-column prop="measuredValue" label="实测值" align="center" header-align="center" />
				<el-table-column prop="time" label="时间点" align="center" header-align="center" />
				<el-table-column prop="unit" label="单位名称" align="center" header-align="center" />
				<el-table-column prop="createDate" label="创建时间" align="center" header-align="center" />
				<el-table-column prop="sex" label="操作" header-align="center" align="center" width="120">
					<template slot-scope="scope">
						<el-button type="text" size="mini" icon="el-icon-edit" @click="go2Edit(scope.row)">编辑
						</el-button>
						<el-button type="text" size="mini" icon="el-icon-delete" @click="go2Del(scope.row)">
							删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination style="margin-top: 15px;text-align: right;" :current-page="page.pageNo"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" />
		</div>
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
			<add-or-edit v-if="dialogVisible && dialogType === 'edit'" :origin-data="currentSelect" @close="go2Close" />
			<import-file v-if="dialogVisible && dialogType === 'import'" action="/admin/v0.1/effluentqualitydays/import"
				@close="go2Close" @downloadTemplate="go2DownloadTemplate"></import-file>
		</el-dialog>
	</div>
</template>

<script>
	import XLSX from 'xlsx'
	import {
		saveAs
	} from 'file-saver';
	import addOrEdit from './addOrEdit.vue'
	import importFile from '../upload/index.vue'

	import {
		fetchList,
		deleteById,
		deleteByIdBatch
	} from '@/api/yongyue/effluentQualityDay.js'

	import {
		fetchList as fetchPoolList
	} from '@/api/yongyue/waterPool.js'

	export default {
		components: {
			addOrEdit,
			importFile
		},
		data() {
			return {
				searchForm: {
					indicator: "",
					poolId: ""
				},
				tableData: [],
				dialogVisible: false,
				dialogTitle: '提示',
				dialogType: "edit",
				page: {
					pageNo: 1,
					pageSize: 10,
					total: 0
				},
				currentSelect: {},
				options: [],
				multipleSelection: []
			}
		},
		mounted() {
			this.go2Query()
			this.go2QueryPools()
		},
		methods: {
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			go2Refresh() {
				this.page.pageNo = 1
				this.go2Query()
			},
			go2Search() {
				this.page.pageNo = 1
				this.go2Query()
			},
			handleSizeChange(val) {
				this.page.pageSize = val
				this.go2Query()
			},
			handleCurrentChange(val) {
				this.page.pageNo = val
				this.go2Query()
			},
			go2QueryPools() {
				const params = {
					page_no: 1,
					page_size: 10000
				}
				fetchPoolList(params).then((res) => {
					if (res.code === 200) {
						const message = res.data
						this.options = message.items.map(item => {
							return {
								label: item.poolName,
								value: item.id
							}
						})
						this.options.unshift({
							label: "全部",
							value: ""
						})
					}
				}).catch((error) => {
					console.log(error)
				})
			},
			go2Query() {
				const loading = this.$loading({
					lock: true,
					text: '加载中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				const params = {
					page_no: this.page.pageNo,
					page_size: this.page.pageSize,
					pool_id: this.searchForm.poolId,
					indicator: this.searchForm.indicator
				}
				fetchList(params).then((res) => {
					loading.close()
					if (res.code === 200) {
						const message = res.data
						this.tableData = message.items
						this.page.total = message.total
					}
				}).catch((error) => {
					loading.close()
					console.log(error)
				})
			},
			go2Import() {
				this.dialogTitle = '批量导入'
				this.dialogType = "import"
				this.dialogVisible = true
			},
			go2Edit(data) {
				this.dialogTitle = '编辑出水水质'
				this.dialogType = "edit"
				this.currentSelect = {
					...data
				}
				this.dialogVisible = true
			},
			go2Del(row) {
				this.$confirm('此操作将会删除所有数据，是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '处理中',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					deleteById(row.id).then((res) => {
						loading.close()
						const message = res.message
						this.$message.success('删除数据成功')
						this.go2Query()
					}).catch((error) => {
						loading.close()
						console.log(error)
					})
				}).catch((err) => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			},
			go2Add() {
				this.dialogTitle = '新增出水水质'
				this.dialogType = "edit"
				this.currentSelect = {}
				this.dialogVisible = true
			},
			handleClose() {
				this.dialogVisible = false
			},
			go2Close() {
				this.dialogVisible = false
				this.go2Query()
			},
			go2Reset() {
				this.searchForm = {
					indicator: "",
					poolId: ""
				}
				this.go2Query()
			},
			go2BatchDel() {
				if (this.multipleSelection.length === 0) {
					this.$message.warning('请先选择要删除的数据')
					return
				}
				let ids = this.multipleSelection.map(item => {
					return item.id
				})
				this.$confirm('此操作将会删除所有数据，是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const loading = this.$loading({
						lock: true,
						text: '处理中',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					deleteByIdBatch({
						ids: ids
					}).then((res) => {
						loading.close()
						this.$message.success('删除数据成功')
						this.go2Query()
					}).catch((error) => {
						loading.close()
						console.log(error)
					})
				}).catch((err) => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			},
			go2ExportExcel() {
				const loading = this.$loading({
					lock: true,
					text: '导出中',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				const params = {
					page_no: 1,
					page_size: 100000,
				}
				fetchList(params).then((res) => {
					loading.close()
					if (res.code === 200) {
						const message = res.data
						this.go2Export(message.items)
					}
				}).catch((error) => {
					loading.close()
				})
			},
			go2Export(rawData) {
				const header = [
					"指标名称",
					"所属池子",
					"策略类型",
					"标准值",
					"预测值",
					"实测值",
					"时间点",
					"单位名称",
					"创建时间"
				]
				var data_t = rawData.map(i => {
					return [
						i.indicator,
						i.waterPoolName,
						i.policyTypeName,
						i.standardValue,
						i.predictedValue,
						i.measuredValue,
						i.time,
						i.unit,
						i.createDate
					]
				})
				const data = [header].concat(data_t)
				const worksheet = XLSX.utils.aoa_to_sheet(data);
				const workbook = XLSX.utils.book_new();
				worksheet["!cols"] = [{
					wpx: 100
				}, {
					wpx: 120
				}]
				XLSX.utils.book_append_sheet(workbook, worksheet);
				XLSX.writeFile(workbook, "出水水质每日数据.xlsx")
			},
			go2DownloadTemplate() {
				const header = [
					"指标名称",
					"所属池子",
					"策略类型",
					"标准值",
					"预测值",
					"实测值",
					"时间点",
					"单位名称"
				]
				const data = [header].concat([])
				const worksheet = XLSX.utils.aoa_to_sheet(data);
				const workbook = XLSX.utils.book_new();
				worksheet["!cols"] = [{
					wpx: 100
				}, {
					wpx: 120
				}]
				XLSX.utils.book_append_sheet(workbook, worksheet);
				XLSX.writeFile(workbook, "出水水质每日数据导入模板.xlsx")
			}
		}
	}
</script>

<style lang="scss">
	.race-index {
		padding: 20px;

		.top-search-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.table-content-wrapper {
			// margin-top: 15px;
		}

		.el-divider--horizontal {
			margin: 15px 0;
		}

	}
</style>